<template>
  <view class="login">
    <Back />
    <image src="https://pockets.qixdian.cn/upload/20240711/668f855f30efb.png" mode="scaleToFill" class="bg" />

    <view class="login_header">
      <image src="https://pockets.qixdian.cn/upload/20240711/668f855f1e084.png" mode="scaleToFill" class="login_icon" />
      <view>
        <image src="https://pockets.qixdian.cn/upload/20240711/668f855f17746.png" mode="scaleToFill"
          class="login_logo" />
      </view>
    </view>
    <view class="login_input">
      <uni-easyinput v-model="loginForm.mobile" maxlength='11' :clearable='false' :placeholderStyle="placeholderStyle"
        placeholder="请输入手机号码" :inputBorder="false" class="easyinput"></uni-easyinput>
    </view>
    <view class="login_input">
      <uni-easyinput v-model="loginForm.code" type='number' maxlength='6' :clearable='false'
        :placeholderStyle="placeholderStyle" placeholder="请输入验证码" :inputBorder="false"
        class="easyinput"></uni-easyinput>
      <view class="code" @click="send()" v-if="status">获取验证码</view>
      <view class="code" v-else>{{ time }}</view>
    </view>
    <view style="text-align:center">
      <image src="https://pockets.qixdian.cn/upload/20240711/668f855f16941.png" mode="scaleToFill" class="login_btn"
        @click="login" />
    </view>
    <view class="login_bottom">
      <image mode="heightFix" @click="changeAgree()" v-if="agreeStatus" class="login_bottom_icon"
        src="https://pockets.qixdian.cn/upload/20240711/668f855eee062.png"></image>
      <image mode="heightFix" @click="changeAgree()" v-else class="login_bottom_icon"
        src="https://pockets.qixdian.cn/upload/20240711/668f855f04815.png"></image>
      <view class="title">我已阅读并同意
        <text class="message">《用户协议》</text>
        <!-- @click="rule('用户协议','user_agree')" -->
        <text class="message">《隐私协议》</text>
        <!-- @click="rule('隐私政策','privacy')" -->
      </view>
    </view>
  </view>
</template>
<script>
import Back from '@/components/back'
export default {
  components: {
    Back
  },
  data() {
    return {
      placeholderStyle: 'color:#7896E2;font-size:32rpx',
      loginForm: {

      },
      status: true,
      time: 60,
      timer: null,
      agreeStatus: false
    }
  },
  methods: {
    //   登录
    login() {
      var reg = /^1\d{10}$/;
      if (!this.agreeStatus) {
        uni.showToast({
          title: '请先阅读并同意用户协议，隐私协议',
          icon: 'none',
          mask: true
        })

        return
      }
      else if (!this.loginForm.mobile) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none',
          mask: true
        })
        return;
      }
      else if (!this.loginForm.code) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none',
          mask: true
        })
        return;
      }

      else if (!reg.test(this.loginForm.mobile)) {
        uni.showToast({
          title: '手机号格式错误',
          icon: 'none',
          mask: true
        })

        return false;
      }
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      this.$Request.post(this.$api.user.login, this.loginForm).then((res) => {
        uni.hideLoading()
        if (res.code == 200) {
          uni.showToast({
            title: '登录成功',
            icon: 'none',
          })
          console.log(res)

          setTimeout(() => {
            uni.switchTab({ url: '/pages/index/index' })
          }, 200);
          uni.setStorageSync('token', res.data.token);
          uni.setStorageSync('user_id', res.data.user_id);
          uni.setStorageSync('avatar', res.data.avatar);
          uni.setStorageSync('nickname', res.data.nickname);
          uni.setStorageSync('mobile', res.data.mobile);
        }
      })
    },
    //   同意协议
    changeAgree() {
      this.agreeStatus = !this.agreeStatus
    },
    //  发送短信
    send() {
      if (!this.agreeStatus) {
        uni.showToast({
          title: '请先阅读并同意用户协议，隐私协议',
          icon: 'none',
          mask: true
        })
        return
      }
      if (!this.loginForm.mobile) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none',
          mask: true
        })
        return
      }
      var reg = /^1\d{10}$/;
      if (!reg.test(this.loginForm.mobile)) {

        uni.showToast({
          title: '手机号格式错误',
          icon: 'none',
          mask: true
        })
        return false;
      }
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.status = false;
      this.timer = setInterval(() => {
        this.time--;
        if (this.time == 0) {
          clearInterval(this.timer)
          this.time = 60
          this.status = true;
        }
      }, 1000)
      this.$Request.get(this.$api.user.sendCode, this.loginForm).then(res => {
        uni.hideLoading()
        if (res.code == 200) {
          this.show('短信发送成功')
        }
      }).catch(error => {
        console.log(error)
      })
    },
  }
}
</script>
<style lang="scss" scoped>
/deep/.login_input{
  background-color: #ccc !important;
}
.login {
  width: 100vw;
  min-height: 100vh;
  padding: 120rpx 20rpx 0;
  box-sizing: border-box;
  position: relative;

  .bg {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: -111;
    left: 0;
  }

  .login_header {
    text-align: center;

    .login_icon {
      width: 208rpx;
      height: 208rpx;
      margin-top: 70rpx;
      border-radius: 10rpx;
    }

    .login_logo {
      width: 573rpx;
      height: 79rpx;
      margin-top: 40rpx;
    }
  }

  .login_input {
    position: relative;
    width: 650rpx;
    display: flex;
    align-items: center;
    border-radius: 50rpx;
    background: #fff;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 90rpx;
    box-sizing: border-box;
    margin: 40rpx auto 0;
    opacity: 0.8;
    color: #fff;
  }

  .code {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30rpx;
    color: #45a0fe;
    z-index: 1111;
  }

  .login_btn {
    width: 530rpx;
    height: 130rpx;
    margin: 150rpx auto 50rpx;
  }

  .login_bottom {
    width: 500rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;

    .login_bottom_icon {
      font-size: 24rpx;
      width: 24rpx;
      height: 24rpx;
      margin-right: 5rpx;
    }

    .title {
      color: #72729a;
      font-size: 24rpx;
    }

    .message {
      color: #45a0fe;
    }
  }
}
</style>
